<template>
  <el-form :inline="true" :model="Form" class="demo-form-inline">
    <el-collapse accordion>
      <el-collapse-item name="1" :disabled="FormLabel.length <= 4 ? true : false">
        <template #title>
            <el-form-item
              :label="item.label"
              v-for="(item, index) in FormLabel"
              :key="index"
              :style="{ 'min-width': `${item.minWidth}'!important'` }"
              v-show="formItemFn(item,index)"
              @click.stop.prevent="add()"
            >
              <!-- 输入框 -->
              <el-input
                v-model="Form[item.name]"
                clearable
                v-if="!item.type || item.type === 'input'"
                :disabled="item.disabled"
              />
              <!-- 下拉选框 -->
              <el-select v-model="Form[item.name]" clearable v-if="item.type === 'select'">
                <el-option
                  :label="item1.label"
                  filterable
                  :value="item1.value"
                  v-for="(item1, index) in item.client"
                  :key="item1.value"
                />
              </el-select>
              <!-- 客户 -->
              <el-select
                v-model="Form[item.name]"
                placeholder="请输入客户名称"
                v-if="item.type === 'customer'"
                filterable
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!-- 日期选框 -->
              <el-date-picker
                v-else-if="item.type == 'picker'"
                v-model="Form[item.name]"
                type="date"
                placeholder="请输入日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
              <!-- 开始到结束 -->
              <el-date-picker
                v-model="Form[item.name]"
                v-else-if="item.type == 'datetimerange'"
                type="datetimerange"
                start-placeholder="开始"
                end-placeholder="结束"
                format="YYYY-MM-DD"
                date-format="YYYY/MM/DD HH:mm:ss"
                time-format="HH:mm"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
              />
              <!-- 部门 -->
              <el-tree-select
                v-model="Form[item.name]"
                :data="deptOptions"
                v-else-if="item.type == 'department'"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择归属部门"
                check-strictly
              />
              <!-- 凭证 -->
              <el-tree-select
                v-model="Form[item.name]"
                :data="voucherOptions"
                v-else-if="item.type == 'voucherStatusItem'"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择凭证状态"
                check-strictly
              />
            </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="onSubmit(Form)" class="submit" icon="Search"
              >查找
            </el-button>
            <el-button type="primary" @click="onReset(Form)" class="reset" icon="Refresh"
              >重置
            </el-button>
          </el-form-item>
        </template>
        <el-form-item
          :label="item.label"
          v-for="(item, index) in FormLabel"
          :key="index"
          v-show="index >= 4"
        >
          <!-- 输入框 -->
          <el-input
            v-model="Form[item.name]"
            clearable
            v-if="!item.type || item.type == 'input'"
            :disabled="item.disabled"
          />
          <!-- 下拉选框 -->
          <el-select v-model="Form[item.name]" clearable v-if="item.type == 'select'">
            <el-option
              :label="item1.label"
              filterable
              :value="item1.value"
              v-for="(item1, index) in item.client"
              :key="item1.value"
            />
          </el-select>
          <!-- 客户 -->
          <el-select
            v-model="Form[item.name]"
            placeholder="请输入客户名称"
            v-if="item.type == 'customer'"
            filterable
          >
            <el-option
              v-for="item in customerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 日期选框 -->
          <el-date-picker
            v-else-if="item.type == 'picker'"
            v-model="Form[item.name]"
            type="date"
            placeholder="请输入日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
          <!-- 开始到结束 -->
          <el-date-picker
            v-model="Form[item.name]"
            v-else-if="item.type == 'datetimerange'"
            type="datetimerange"
            start-placeholder="开始"
            end-placeholder="结束"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD HH:mm:ss"
            time-format="HH:mm"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
          <!-- 部门 -->
          <el-tree-select
            v-model="Form[item.name]"
            :data="deptOptions"
            v-else-if="item.type == 'department'"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属部门"
            check-strictly
          />
          <!-- 凭证 -->
          <el-tree-select
            v-model="Form[item.name]"
            :data="voucherOptions"
            v-else-if="item.type == 'voucherStatusItem'"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择凭证状态"
            check-strictly
          />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
<script setup>
import { ref, defineEmits, defineProps } from 'vue'
import { deptTreeSelect } from '@/api/system/user'
import { apiDataStore } from '@/store/modules/apiData'
// 判断里面是否有datetimerange有就显示3没有显示4
let flagfalse = ref(true)
const formItemFn = (v,i)=>{
  if(flagfalse.value){
    if(v.type === 'datetimerange'){
      flagfalse.value = false
      return i < 3
    }else{
     return i < 4
    }
  }else{
    return i < 3
  }
}
const voucherOptions = ref([
  {
    id: '未生成',
    label: '未生成',
  },
  {
    id: '已生成',
    label: '已生成',
  },
])

const apiStore = apiDataStore()
let emit = defineEmits(['onSearch'])
const props = defineProps({
  Form: {
    type: Object,
    default: {},
  },
  FormLabel: {
    type: Array,
    default: [],
  },
  saleClient: {
    type: Object,
  },
  dateSelect: {
    type: Object,
  },
})

const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
// 查找
const onSubmit = (v) => {
  emit('onSearch', v)
}
// 重置
const onReset = (v) => {
  // 重置传入固定的表单数据
  for (const key in v) {
    v[key] = ''
  }
}

import { getWorkApi } from '@/api/tickets'

let customerList = reactive([])

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
  if (apiStore.customerList.length > 0) {
    customerList = apiStore.customerList
  } else {
    let params = { customerName: v }
    let { code, data } = await getWorkApi(params)
    if (code == 200) {
      data.forEach((v) => {
        apiStore.customerList.push({
          label: v.primaryClassification + '/' + v.customerName,
          value: v.customerId,
        })
      })
      customerList = apiStore.customerList
    }
  }
}
const deptOptions = ref(undefined)
/*查询部门下拉树结构 */
const getDeptTree = () => {
  if (apiStore.deptApiData.length > 0) {
    deptOptions.value = apiStore.deptApiData
  } else {
    deptTreeSelect().then((response) => {
      apiStore.deptApiData = response.data
      deptOptions.value = apiStore.deptApiData
    })
  }
}
onMounted(() => {
  getWorkApiData()
  getDeptTree()
})
</script>
<style scoped lang="scss">
.el-collapse {
  --el-collapse-border-color: transparent !important;
}

:deep(.el-form-item__content) {
  display: inline-block;
}

:deep(.el-form-item__label) {
  min-width: 87px;
}

.demo-form-inline {
  :deep(.el-form-item) {
    margin-right: 0px !important;
  }

  :deep(.el-date-editor) {
    width: 100%;
  }

  :deep(.el-form-item:has(.el-date-editor)) {
    width: 33%;
  }

  :deep(.el-form-item:has(.el-input__inner)) {
    width: 16.5%;

    .el-select {
      width: 100%;
    }
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    font-size: 15px !important;
  }

  .reset {
    background-color: #fff;
    color: #333;
  }

  .btn {
    margin-left: 32px;
  }
}
</style>
